<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Component</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<style>

    .img{
        display: none;
    }
    .show{
        display: block;
    }
</style>
<body>
    <div id="root"></div>
    <template>

    </template>
    
</body>
<script>
    /**
     * @props
     *  - el   string  轮播图挂载的节点选择器
     *  - imgList  string[]  img-url组成的数组
     *  - auto   boolean   是否开启自动轮播功能， 默认为false
     *  - autoTimer  自动轮播的间隔时间， 默认1s
     * **/
    class Swiper {
        constructor(props){
            const {imgList = [],el,  auto = false, autoTimer = 1000} = props;
            this.imgList = imgList;
            this.auto = auto;
            this.autoTimer = autoTimer;
            this.currentShowImgIndex = 0;
            this.el = document.querySelector(el);
            this.wrap = document.createElement('div');
            this.render();
            this.mount();
            if(this.auto){
                this.autoPlay();
            }
        }
        getUI  = () => {
            let imgs = '';
            this.imgList.forEach((src, index)=>{
                imgs += `<img class="img ${index === this.currentShowImgIndex? 'show':''}" src="${src}">`
            })
            return `
                <div class="swiper-wrap">
                    <button class="btn left"> &lt; </button>
                    <button class="btn right"> &gt; </button>
                    ${imgs}
                </div>
            `
        }
        
        render = () => {
            this.wrap.innerHTML = this.getUI();
        }

        mount = () => {
            this.el.appendChild(this.wrap);
        }
        
        autoPlay = () => {
            setInterval(() => {
                this.go(this.currentShowImgIndex+1);
            }, this.autoTimer || 1000);
        }
        go = (index) => {
            if(index === -1){
                index = this.imgList.length-1;
            }
            if(index === this.imgList.length ){
                index = 0;
            }
            this.currentShowImgIndex = index;
            this.render();
        }
        
    }
    const swiper = new Swiper({
        imgList: [
            'https://img0.baidu.com/it/u=1429651842,2045410088&fm=26&fmt=auto',
            'https://img2.baidu.com/it/u=1704007411,3954041731&fm=26&fmt=auto',
            'https://img1.baidu.com/it/u=1470279824,2995484050&fm=26&fmt=auto'
        ],
        auto: true,
        el: '#root'
    });
    console.log('swiper', swiper);
</script>
</html>